<template>
  <!-- 可关联小区用户列表 -->
  <div>
    <div class="user">
      <!-- {{dataModel}} -->
      <!-- 搜索 -->
      <!-- <SearchCForL
        :searchData="dataModel"
        @searchCallBack="searchCallBack"
      ></SearchCForL> -->
      <!-- {{searchContent}} -->
      
      <searchComponents
        :key="searchKey"
        :searchData="dataModel"
        @searchCallBack="searchCallBack"
        :optionsZi="optionsZi"
        :searchOptionTable="searchOptionTable" 
        :getFindByTypeData="getFindByTypeData"
      ></searchComponents>
      <!-- {{searchContent}} -->
      <div class="buttons">
        <!-- style="position: absolute;top: 65px;left:77%;" -->
      </div>
      <div style="border-top:1px solid #E6E6E6;padding:0px 20px;"></div>
      <div style="padding: 25px 30px;">
        <!-- 右侧公共组件 -->
        <rightButtons
          style="float:right;padding:10px;"
          @sunS_F='sunS_F'
          @configuration='configuration'
          class="right_buttons"
          @emptySearch='emptySearch'
        ></rightButtons>
       
      </div>

    </div>
    
    <div class="out" style="padding:0px 20px">
      <!-- 字典 -->
      <dictionaries :searchData='dataModel' :modelType='modelType' @optionData="dictionariesCallBack"></dictionaries>
      <!--数据列表-->
      <!-- {{dataAttribute}} -->
      <el-table
        ref="multipleTable"
        :data="dataAttribute"
        @selection-change="handleSelectionChange"
        v-loading.body="false"
        border
        fit
        highlight-current-row
        size="mini"
        :cell-style="{padding:'5px 0'}"
      >
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="55"></el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexMethod"
          width="50"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="50"
          v-for="item in dataModel"
          v-if="item.tableSign"
          :key="item.id"
          :label="item.CN"
          :show-overflow-tooltip="true"
        >
          <!-- <template v-if="item.EN=='sysCompanyCode'" >
            <template slot-scope="scope">{{scope.row[item.EN]}}</template>
            &&item.EN!='sysCompanyCode'
          </template> -->
            <template
              slot-scope="scope"
            >{{item.type === 'select' ? optionDatas(item.typeGroupCode ? optionsZi[item.EN] : searchOptionTable[item.EN],scope.row[item.EN],item.EN):scope.row[item.EN]}}</template>      
            <!-- <template
              slot-scope="scope"
            >{{item.type === 'select' ? optionDatas(item.typeGroupCode?optionsZi[item.EN]:searchOptionTable[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template>       -->
        </el-table-column>
        <el-table-column width="280px" align="center" label="操作">
          <template slot-scope="scope">
            <!-- 绑定小区 -->
            <el-button
              style="color:#C90010;border:none;"
              icon="el-icon-view"
              circle
              @click="AUT(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top:15px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
      ></el-pagination>
    </div>
    
  </div>
</template>
<script>
//引入组件
import {
  SearchCForL,
  buttonhurdle,
  examine,
  searchComponents,
  rightButtons,
  dictionaries
} from "@/views/components/FLPage";
//引入组件

//引入组件

import authorization from "./authorization";
//引入api ajax
//引入API
import {
  searchPageSize
  
} from "@/api/admin/flUserCommunity/index";

export default {
  components: {
    buttonhurdle,
    modificationi,
    examine,
    searchComponents,
    SearchCForL,
    dictionaries,
    addComponent,
    rightButtons
  },
  name:'user',
  data() {
    return {
      putUpdateUserAndMemberKey:0,
      // 搜索框刷新组件
      searchKey:0,
      // 角色Id
      roleIdData:null,
      // 编辑传回角色id
      roleIdDatass:null,
      // indexMethods:'',
      menuTrigger: "",
      //搜索
      searchContent: undefined,
      //后端传来的数据
      dataAttribute: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数
      //查看的数据
      examineData: {},
      //查看的弹窗控制器
      DialogVisibleExamine: false,
      //表格中选中的数组
      multipleSelection: [],
      // 字典请求字段数据
      modelType:'table',
      optionsZi:[],
      searchOptionTable:[],
      //数据模型
      dataModel: [
        // {
          // EN: "id",
          // CN: "序号",
          // value: "",
          // type: "input",
          // option: [],
          // typeFrom: "string",
          // Exp: "",
          // err: "",
          // result: true,
          // sign: true,
          // searchSign: false,
          // addSign: false,
          // tableSign: true,
          // examineSign: false,
          // examineDisabled: false,
          // modificationSign: false
        // },
        {
          EN: "username",
          CN: "账户名称",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "^[0-9A-Za-z]{4,14}$",
          err: "4-14个字符 数字和字母组成",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "password",
          CN: "密码",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$",
          err: "6-20个字符 数字和字符组成",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "name",
          CN: "用户名",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "^.{2,20}$",
          err: "6-20个字符 数字和字符组成",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "telPhone",
          CN: "手机号码",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "^[1]([3-9])[0-9]{9}$",
          err: "请输入正确的手机号码！",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "sysCompanyCode",
          CN: "租户",
          value: "",
          type: "select",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
          // dictTable:{
          //   table:'base_tenant_information',
          //   id:'sys_company_code',
          //   name:'name',
          //   associated:1
          // }
        },
         {
          EN: "groupId",
          CN: "角  色",
          value: "",
          type: "select",
          option: [],
          radio: [], //下面赋值
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: true
          // dictTable:{
          //   table:'base_group',
          //   id:'id',
          //   name:'name',
          //   associated:'group_type%3D2'
          //   // associated:'group_type=2'
          // }
        },
        // {
        //   EN: "sex",
        //   CN: "性别",
        //   value: "",
        //   type: "input",
        //   option: [],
        //   typeFrom: "string",
        //   Exp: "",
        //   err: "",
        //   result: true,
        //   sign: true,
        //   searchSign: false,
        //   addSign: false,
        //   tableSign: false,
        //   examineSign: false,
        //   examineDisabled: false,
        //   modificationSign: false
        // },
        // {
        //   EN: "type",
        //   CN: "租户类型",
        //   value: "",
        //   type: "select",
        //   option: [
        //     {
        //       value: "1",
        //       label: "运维"
        //     },
        //     {
        //       value: "2",
        //       label: "租户管理员"
        //     }
        //   ],
        //   typeFrom: "string",
        //   Exp: "",
        //   err: "",
        //   result: true,
        //   sign: true,
        //   searchSign: false,
        //   addSign: false,
        //   tableSign: false,
        //   examineSign: true,
        //   examineDisabled: false,
        //   modificationSign: false,
        //   typeGroupCode:'we'
        // },
        {
          EN: "status",
          CN: "状 态",
          value: "",
          type: "select",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          typeGroupCode:'statusDct'
          // statusDct
        },
        {
          EN: "description",
          CN: "描 述",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          skipSign:true
        },
        // {
        //   EN: "sysCompanyCode",
        //   CN: "租户管理员租户",
        //   value: "",
        //   type: "radio",
        //   option: [],
        //   radio: [], //下面赋值
        //   Exp: "",
        //   err: "",
        //   result: true,
        //   sign: true,
        //   searchSign: false,
        //   addSign: false,
        //   tableSign: false,
        //   examineSign: false,
        //   examineDisabled: false,
        //   modificationSign: false
        // },
      ],
      //角色
      ROLE:undefined,
      //用户角色
      useruData:[],
      // UserArr:undefined,
      // 改变的数据
      sysCompanyCodeRoles:'',
      // 租户信息
      getFindByTypeData:[],
      // 编辑中的角色默认值
      roleIdDataMod:''
    };
  },
  // searchContent.sysCompanyCode
  mounted() {
    this.getFindByType()
    // this.forData(this.currentPage, this.pagesize);
  },
  methods: {
    
    // 配置
    configuration(msg){
      if (msg == '配置') {
        console.log(msg);
        
      }
    },
    // 重置
    emptySearch(msg){     
      if (msg == '重置') {
        let searchContent = this.searchContent
        console.log(this.searchContent,855555);
        
        for (const key in this.searchContent) {
          if (this.searchContent.hasOwnProperty(key)) {
            this.searchContent[key] = ""
          }
        }
        console.log(this.dataModel,966666);  
        for (let i = 0; i < this.dataModel.length; i++) {
          this.dataModel[i].value = ""
        }
        console.log(this.searchContent,'kankanjiguo');
        console.log(this.dataModel,'dataModel');
        this.searchKey = this.searchKey + 1
        console.log(this.currentPage, this.pagesize, this.searchContent,'参数');
        
        // this.forData(this.currentPage, this.pagesize);
        this.forData(this.currentPage, this.pagesize, this.searchContent);
      }
    },
    // 请求获取默认的角色
    // get
    // roleId(row){
    //   console.log(row,888);
      
    //   // const res = selectNameByuserId(row.sysCompanyCode)
    //   return row
    // },
    // addmodData(row){
    //   console.log(row);
    //   // 发送请求  拿到数据
    //   const res = selectNameByuserId(row.sysCompanyCode)
    //   console.log(res);
      
    //   // 给a添加数据
    //   // return
    //   return row
    // },
    // 编辑组件获取角色
    // async getSelectNameByuserId(id){
    //   console.log(id);
      
    //   const res = await selectNameByuserId(id)
    //   console.log(res.data);
      
    //   return res.data
    // },
    // 编辑传角色id
    
    // 用于添加租户管理员时选择租户后之间传回选择租户的角色：
    // async getSelectByCodeAndTypeData(sysCompanyCode){
    //   console.log(sysCompanyCode,999999999);
      
    //   const res = await getSelectByCodeAndType(sysCompanyCode)
    //   console.log(res,'用于添加租户管理员时选择租户后之间传回选择租户的角色'); 
      
    //   const optionDatas = res.data
    //   this.sysCompanyCodeRoles = res.data
    // },
    // 重置
    // emptySearch(){
    //   this.searchContent = undefined;
    //   this.forData(this.currentPage, this.pagesize);
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false;
    },
    async searchContentMod(data){
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        console.log(element,888888888888);
        
        const res = await selectNameByuserId(element.id)
        console.log(res,77777);
        if (res.data) {
          element.groupId = res.data.id
        }     
      }
      this.dataAttribute = data
      // console.log(data,'gaihaode ');
      // this.roleIdDataMod = 
      // 整理groupId
      // selectNameByuserId()
    },
    //分页查询
    forData(page, size, content) {
      searchPageSize(page, size, content).then(response => {
        // console.log(response);
        this.dataAttribute = response.data.list;  
        // 整理数据
        this.searchContentMod(this.dataAttribute)
        // console.log(this.dataAttribute,85263);
               
        this.pagetotal = response.data.total;
      });
    },
    //分页
    handleSizeChange(val) {
      console.log("每页 " + val + " 条");
      this.pagesize = val
      this.forData(this.currentPage, val, this.searchContent);
    },
    handleCurrentChange(val) {
      console.log("当前页: " + val);
      // 序号
      // this.indexMethod()
      this.forData(val, this.pagesize, this.searchContent);
      this.currentPage = val
    },
    //查询组件回调
    searchCallBack(newData) {
      let obj = {};
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value;
      }
      // console.log(obj)
      this.searchContent = obj;
    },
    //搜索
    sunS_F() {
      //console.log(this.searchContent); //用这组数据去ajax查询
      this.forData(this.currentPage, this.pagesize, this.searchContent);
    },
    //增加
    toAdd(toAddData) {
      // console.log("toAddData");
      console.log(toAddData,9999);
      
      let obj = {};
      for (let i = 0; i < toAddData.length; i++) {
        obj[toAddData[i].EN] = toAddData[i].value;
      }
      // let roleIdData = obj.sysCompanyCode    
      // console.log(obj,roleIdData,'????????????');
      // console.log(roleIdData,'roleIdData');
      let roleIdData = obj.groupId
      console.log(obj,roleIdData,'参数');
      
      postAddUserAndMember(obj,roleIdData)
        .then(response => {
          this.forData(this.currentPage, this.pagesize, this.searchContent);
          this.$message({
            message: response.message,
            type: "success"
          });
        })
        .catch(() => {
          this.$message.error("添加失败");
        });
    },
    //批量删除
    toDelete(toDeleteData) {
      console.log(toDeleteData);
      console.log(this.multipleSelection);
      let arr = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i].id);
        this.$confirm("确认批量删除？")
          .then(_ => {
            deleteBaseTenantInformation(arr).then(response => {
              this.forData(this.currentPage, this.pagesize, this.searchContent); //刷新列表
            });
            done();
          })
          .catch(_ => {});
      }
    },
    //单项删除
    deleteList(id) {
      console.log(id);
      let arrId = [id];
      this.$confirm("确认删除？")
        .then(_ => {
          deleteByuserId(arrId).then(response => {
            this.forData(this.currentPage, this.pagesize, this.searchContent); //刷新列表
            this.$message({
              type:'success',
              message:'已删除'
            })
          });
        })
        .catch(_ => {
          // this.$message({
          //   type:'warning',
          //   message:'已取消删除'
          // })
        });
    },
    //查看
    makeExaId(row) {
      let copyDialog = true;
      this.DialogVisibleExamine = copyDialog;
      this.examineData = row;
    },
    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //传递删除的参数
      this.deleteDataList = val;
    },
    //修改
    modifyData(value, MDData) {
      console.log(value, MDData,'sss');
      if (value) {    
        let id = MDData.id;
        console.log(this.roleIdDatass,'sssss9999');
        const roleIdDatass = this.roleIdDatass
        // var roleIdDatass = null 
        // this.$nextTick(function(){
        //   roleIdDatass = this.roleIdDatass
        // })
        // const roleIdDatass = this.roleIdDatass
        // putUpdateUserAndMember
        console.log(roleIdDatass,id,MDData,'chuancan?222');
        let groupId = MDData.groupId
        
        putUpdateUserAndMember(groupId,id, MDData)
          .then(Response => {
            this.forData(this.currentPage, this.pagesize, this.searchContent);
            // this.$message({
            //   message: "修改成功!",
            //   type: "success"
            // });
          })
          .catch(() => {
            this.$message.error(
              "错误信息：api/admin/putUpdateUserAndMember/${id}！"
            );
          });
      }
    },
    modificationiButtonClick(newValue){
      if (newValue == '点击编辑') {     
        // this.putUpdateUserAndMemberKey = this.putUpdateUserAndMemberKey + 1
      }

    },
    // 字典组件回调
    dictionariesCallBack([a={}, b={}]){
      // 正常字典
      this.optionsZi = a
      // 跨表字典
      this.searchOptionTable = b
      console.log(a,b,66688); 
      // console.log(options, 111)
      // console.log(options,'huilaide');
      // this.optionsZi = options
      this.forData(this.currentPage, this.pagesize, this.searchContent);  
    // }  
    },
    // 序号
    indexMethod(index){
      var currentPage = this.currentPage
      var pagesize = this.pagesize
      this.$nextTick(function(){
        currentPage = this.currentPage
        pagesize = this.pagesize
      })      
      // console.log(currentPage,pagesize,'996');
      // console.log(currentPage*pagesize+index - 9);
      return currentPage*pagesize -pagesize +1+index
    },
  },
  computed:{
    // 字典计算属性
    optionDatas(){
      return function (arr,val,EN) {
        console.log(arr,val,EN,'99999');
        
        // console.log(arr[val],'why');
        // 判断特殊
        if (EN =='sysCompanyCode') {
          const getFindByTypeData = this.getFindByTypeData
          console.log(getFindByTypeData,'判断特殊');
          
          for (let i = 0; i < getFindByTypeData.length; i++) {
            const element = getFindByTypeData[i];
          console.log(element,'判断特殊element');
            if (getFindByTypeData[i].sysCompanyCode == val) {           
              return getFindByTypeData[i].name 
            }       
          }
        }
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            if(arr[i].value == val){
              // console.log(arr[i].label)
              return arr[i].label    
            }                   
          }   
        }  
      }
    }
  },
  // watch:{
  //   searchContent(newValue){
  //     console.log(newValue.sysCompanyCode,'??');
  //     const sysCompanyCode = newValue.sysCompanyCode
  //     this.getSelectByCodeAndTypeData(sysCompanyCode)
  //   }
  // }
};
</script>